<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>field</title>
	</head>
	<body>
	</body>
	<script type="module">
		import { Nodom, Module} from "/dist/nodom.esm.js";

		class Module1 extends Module {
			template() {
				return `
				<div>
					<h2>field指令</h2>
					<p>field指令用于实现输入类型元素，如input、select、textarea等输入元素与数据项之间的双向绑定。</p>
					<button e-click='change'>change</button>
					<button e-click='change1'>change1</button>
					<div>
						<div>姓名:{{name}}</div>
						<div>出生日期:{{birth}}</div>
						<div>性别:{{sexy}}</div>
						<div>已婚:{{married}}</div>
						<div>学历:{{edu}}</div>
						<div>简介:{{intro}}</div>
					</div>
					<div>
						<div>姓名：<input x-field='name' e-change='changeName'/></div>
						<div>
							出生日期：<input type='date' x-field='birth' value={{birth}} />
						</div>
						<div>
							性别：<input type='radio' x-field='sexy' value='M'/>男
							<input x-field='sexy' type='radio' value='F'/>女
						</div>
						<div>已婚：<input type='checkbox' x-field='married' yes-value='1' no-value='0' />是</div>
						<div>
							学历：<select x-field='edu'>
								<option x-repeat={{edus}} value={{eduId}}>{{eduName}}</option>
							</select>
						</div>
						<div>
							简介:<textarea x-field='intro'></textarea>
						</div>
					</div>
                    <button e-click='click'>click</button>
				</div>
				`;
			}
			
			data() {
				return {
					name: "nodom",
					sexy: "F",
					married: 1,
					edu: '2',
					birth: "2017-05-11",
					edus: [
						{ eduId: 1, eduName: "高中" },
						{ eduId: 2, eduName: "本科" },
						{ eduId: 3, eduName: "硕士研究生" },
						{ eduId: 4, eduName: "博士研究生" },
					],
				};
			}

			change(model, dom) {
				model.married = 0;
				model.sexy = "F";
				model.edu = 3;
				model.name = "aaaa";
				model.intro = "这是nodom简介";
			}
			change1(model, dom) {
				model.name = "nodom123";
			}

			onMount(){
				//console.log(document.querySelector('select').value);
			}
		}

		Nodom.app(Module1);
	</script>
</html>
